<template>
  <v-app-bar
    app
    color="#cd2929"
    class="m-app-bar"
  >
    <v-app-bar-nav-icon />

    <h1 style="color:#fff">
      Rentout
    </h1>
    
    <v-text-field
      style="margin-top: 24px;margin-left:10px"
      label="Search"
      dense
      solo
      depressed
      clearable
      append-icon="mdi-magnify"
    >
      <template 
        v-slot:prepend-inner
      >
        <m-btn-select
          :btn-text="searchName"
          btn-color="#fff"
          :items="searchItems"
        />
      </template>
    </v-text-field>
    <div 
      class="right ml-2 flex-shrink-1 d-flex justify-end" 
      style="flex: 3"
    >
      <m-btn-select
        icon="mdi-plus-circle"
        :open-on-hover="true"
        :arrow-down="false"
        :items="addItems"
      />
      <v-divider
        class="mx-4"
        vertical
      />
      <v-btn
        icon
        color="#eee"
      >
        <v-icon>mdi-calendar-month-outline</v-icon>
      </v-btn>
      <v-btn
        icon
        color="#eee"
      >
        <v-icon>mdi-bell-alert</v-icon>
      </v-btn>
      <v-btn
        icon
        color="#eee"
      >
        <v-icon>mdi-cog-outline</v-icon>
      </v-btn>
      <span>
        <span>small8</span>
        <v-avatar
          color="#eee"
          size="45"
          class="ml-2"
        >
          S8
        </v-avatar>
      </span>
    </div>
    <add-order />
  </v-app-bar>
</template>

<script lang="ts">
import evnetCodes from '../../const/index'
import AddOrder from '@todo/Dialogs/AddOrder.vue'
import MBtnSelect from '@components/BtnSelect/index.vue'

export default {
  name: 'MHeader',
  components: {AddOrder, MBtnSelect},
  data () {
      return {
        searchItems: [
          { title: 'All', value: 9},
          { title: 'Customer', value: 10 },
          { title: 'Order', value: 11 },
          { title: 'Asset', value: 12 },
        ],
        addItems: [
          { title: 'Add Order', value: evnetCodes.addOrder },
          { title: 'Add Asset',value: evnetCodes.addAsset },
        ],
        selectedAddItem: null,
        searchName: 'All'
      }
  },
  methods: {
    onAddItemChange (data:any) {
      console.log(data, this.selectedAddItem)
      this.selectedAddItem = null
    }
  }
}
</script>

<style lang="less" scoped>
.m-app-bar{
  color: #eee !important;
}
</style>